/**
 * @author BoLiang
 */
if (typeof accedo === "undefined") {
	accedo = {};
}
if (typeof accedo.achievement === "undefined") {
	accedo.achievement = {};
}

accedo.achievement.achiPortalFriendsDetail = {
	userName : null,
	idPrefix : null,
	ajaxAppDivNode : null,
	ajaxBadgeDivNode : null,
	ajaxAwardDivNode : null,
	appListLeftArrowDivNode : null,
	appListRightArrowDivNode : null,
	badgeListLeftArrowDivNode : null,
	badgeListRightArrowDivNode : null,
	awardListLeftArrowDivNode : null,
	awardListRightArrowDivNode : null,
	leftArrowNode : null,
	moveCount : null,
	divLength : null,
	divCurrID : null,
	minLeft : null,
	maxLeft : null,
	appListInnerDivNode : null,
	badgeListInnerDivNode : null,
	awardListInnerDivNode : null,
	innerNode : null,
	row : 0,
	oldOnkeydownFunc : null,

	init : function() {
		this.idPrefix = "AppPortalFriends";
		this.divCurrID = new Array();
		this.divCurrID[0] = 0; 
		this.divCurrID[1] = 0;
		this.divCurrID[2] = 0;
		this.moveCount = new Array(); 
		this.moveCount[0] = 0;
		this.moveCount[1] = 0;
		this.moveCount[2] = 0;
		this.divLength = new Array();
		this.divLength[0] = 0;
		this.divLength[1] = 0;
		this.divLength[2] = 0;
		this.minLeft = new Array(); 
		this.minLeft[0] = 0;
		this.minLeft[1] = 0;
		this.minLeft[2] = 0;
		this.maxLeft = new Array(); 
		this.maxLeft[0] = 0;
		this.maxLeft[1] = 0;
		this.maxLeft[2] = 0;
		this.userName = null;
		this.ajaxAppDivNode = null;
		this.ajaxBadgeDivNode = null;
		this.ajaxAwardDivNode = null;
		this.appListLeftArrowDivNode = null;
		this.appListRightArrowDivNode = null;
		this.badgeListLeftArrowDivNode = null;
		this.badgeListRightArrowDivNode = null;
		this.awardListLeftArrowDivNode = null;
		this.awardListRightArrowDivNode = null;
		this.leftArrowNode = null;
		this.appListInnerDivNode = null;
		this.badgeListInnerDivNode = null;
		this.awardListInnerDivNode = null;
		this.innerNode = null;
		this.row = 0;

		this.oldOnkeydownFunc = document.onkeydown;
		document.onkeydown = function(e) {
			accedo.achievement.achiPortalFriendsDetail.keysControl(e);
		};
	},

	appendFriendsDetailDiv : function(username) {
		this.init(); 
		this.userName = username; 

		// create main container div below Title node
		var mainCtnNode = document.createElement("div");
		mainCtnNode.id = "achiPortalFriendsMainCtn";

		// append APP div node
		this.ajaxAppDivNode = document.createElement("div");
		this.ajaxAppDivNode.id = "achiPortalFriendsAjax";
		mainCtnNode.appendChild(this.ajaxAppDivNode);
		// append BADGE div node
		this.ajaxBadgeDivNode = document.createElement("div");
		this.ajaxBadgeDivNode.id = "achiPortalFriendsAjax";
		mainCtnNode.appendChild(this.ajaxBadgeDivNode);
		// append AWARD div node
		this.ajaxAwardDivNode = document.createElement("div");
		this.ajaxAwardDivNode.id = "achiPortalFriendsAjax";
		mainCtnNode.appendChild(this.ajaxAwardDivNode);

		
		// this.initTitleDiv(username);
		this.initAppDiv(username);
		this.initBadgeDiv(username);
		this.initAwardDiv(username);

		return mainCtnNode;

	},

	initAppDiv : function(username) {
		dwr.engine.setPreHook(this.preAppHook); 
		dwr.engine.setPostHook(this.postAppHook);
		UserService._path = "http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/dwr";
		UserService.getJsonAppsnsByUsernameForFriendShow(username,
			this.initAppDivCallback);
	},

	preAppHook : function() {
		var loadingAppNode = document.createElement("div");
		loadingAppNode.id = "achiPortalFriendsLoadingAppNode";
		loadingAppNode.className = "achiPortalFriendsLoadingNode";
		loadingAppNode.innerHTML = "<br /><br /><img width=100px height=100px src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/loading.gif' />"; 
		accedo.achievement.achiPortalFriendsDetail.ajaxAppDivNode.appendChild(loadingAppNode);
	},

	postAppHook : function() {
		var loadingAppNode = document.getElementById("achiPortalFriendsLoadingAppNode");
		accedo.achievement.achiPortalFriendsDetail.ajaxAppDivNode.removeChild(loadingAppNode);
	},

	initAppDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");
		accedo.achievement.achiPortalFriendsDetail.ajaxAppDivNode.appendChild(
			accedo.achievement.achiPortalFriendsDetail.createAppDiv(serverDataObj));
	},

	/**
	 * initiate the application div node
	 * @return {div node} application div node
	 */
	createAppDiv : function(serverDataObj) {
		// create app title sub-div node
		var appTitleDivNode = document.createElement("div");
		appTitleDivNode.id = "achiPortalFriendsAppTitle";

		var achiWordNode = document.createElement("div");
		achiWordNode.id = "achiFriendsWordNode"; 
		achiWordNode.innerHTML = "<font color=white>Apps</font>";
		appTitleDivNode.appendChild(achiWordNode);
		
		// create app list sub-div node
		var appListDivNode = document.createElement("div");
		appListDivNode.id = "achiPortalFriendsAppList";
		// create app list left arrow, right arrow and list container
		var appListLeftDivNode = document.createElement("div");
		appListLeftDivNode.id = "achiPortalFriendsAppListLeft";

		this.appListLeftArrowDivNode = document.createElement("div");
		this.appListLeftArrowDivNode.id = "appFriendsLeftArrow"; 
		this.appListLeftArrowDivNode.className = "achiFriendsPortalArrow";
		this.appListLeftArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/leftArrow.png' />"
		this.appListLeftArrowDivNode.style.visibility = "hidden";
		appListLeftDivNode.appendChild(this.appListLeftArrowDivNode);
		this.leftArrowNode = this.appListLeftArrowDivNode;

		var appListRightDivNode = document.createElement("div");
		appListRightDivNode.id = "achiPortalFriendsAppListRight";

		this.appListRightArrowDivNode = document.createElement("div");
		this.appListRightArrowDivNode.id = "appFriendsRightArrow"; 
		this.appListRightArrowDivNode.className = "achiFriendsPortalArrow";
		this.appListRightArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/rightArrow.png' />"
		
		this.minLeft[0] = 900 - ((serverDataObj.appsns.length * 150) + 30);
		this.maxLeft[0] = 0;
		if (this.minLeft[0] >= 0) {
			this.appListRightArrowDivNode.style.visibility = "hidden";
		}

		appListRightDivNode.appendChild(this.appListRightArrowDivNode);
		this.rightArrowNode = this.appListRightArrowDivNode;
		var appListCtnDivNode = document.createElement("div");
		appListCtnDivNode.id = "achiPortalFriendsAppListCtn";
		appListDivNode.appendChild(appListLeftDivNode);
		appListCtnDivNode.appendChild(this.createAppCell(serverDataObj)); 
		appListDivNode.appendChild(appListCtnDivNode);
		appListDivNode.appendChild(appListRightDivNode);

		// create app div node
		var appDivNode = document.createElement("div");
		appDivNode.id = "achiPortalFriendsApp";

		

		// append app title and achi list sub-div nodes to achi div node
		appDivNode.appendChild(appTitleDivNode);
		appDivNode.appendChild(appListDivNode);

		return appDivNode; 
	},


	createAppCell : function(serverDataObj) {
		

		this.appListInnerDivNode = document.createElement("div");
		this.appListInnerDivNode.id = "achiPortalFriendsAppListInner";
		this.appListInnerDivNode.style.left = "0px"; 
		this.appListInnerDivNode.style.width = 150 * serverDataObj.appsns.length + 30 + "px"; 


		this.divLength[0] = serverDataObj.appsns.length; 
		var cellInterval = 0;
		for (var appCellNum = 0; appCellNum < this.divLength[0]; appCellNum++) {
			var appListCellDivNode = document.createElement("div");

			if (serverDataObj.appsns[appCellNum].state == "none") {
				appListCellDivNode.className = "achiPortalFriendsAppListCellSmallGray";
			} else {
				appListCellDivNode.className = "achiPortalFriendsAppListCellSmall";
			}

			if (appCellNum == 0 && serverDataObj.appsns[0].state == "finished"
				|| appCellNum == 0 && serverDataObj.appsns[0].state == "playing") {
				appListCellDivNode.className = "achiPortalFriendsAppListCellBig";
			} else if (appCellNum == 0 && serverDataObj.appsns[0].state == "none") {
				appListCellDivNode.className = "achiPortalFriendsAppListCellBigGray";
			}
			
			

			cellInterval = cellInterval + 30;
			appListCellDivNode.style.left = cellInterval + "px";

			appListCellDivNode.id = "AppPortalFriends" + appCellNum;

			appListCellDivNode.innerHTML = "<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/appImages/" 
				+ serverDataObj.appsns[appCellNum].appsn 
				+ ".png' />"
				+ "<hidden id='" + appListCellDivNode.id + "sn'"
				+ "value='"+ serverDataObj.appsns[appCellNum].appsn + "'/>"
				+ "<hidden id='" + appListCellDivNode.id + "name'"
				+ "value='"+ serverDataObj.appsns[appCellNum].appname + "'/>"
				+ "<hidden id='" + appListCellDivNode.id + "cellnum'"
				+ "value='"+ appCellNum + "'/>";

			if (serverDataObj.appsns[appCellNum].state == "finished") {
				var cellStar = document.createElement("div");
				cellStar.id = "cellStar";
				cellStar.className = "cellStar";
				cellStar.innerHTML = "<img width=100% height=100% src='http://"
									+ accedo.achievement.config.serverIP + ":" 
									+ accedo.achievement.config.serverPort + "/" 
									+ accedo.achievement.config.pluginName + "/images/otherImages/cellStar.png' />";
				appListCellDivNode.appendChild(cellStar);
			}
			
			this.appListInnerDivNode.appendChild(appListCellDivNode);
		}
		this.innerNode = this.appListInnerDivNode;
		return this.appListInnerDivNode; 
	},


	//***************************************************************************************

	initBadgeDiv : function(username) {
		dwr.engine.setPreHook(this.preBadgeHook); 
		dwr.engine.setPostHook(this.postBadgeHook);
		BadgeService._path = "http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/dwr";
		BadgeService.getJsonBadgesByUsernameForFriendShow(username,
			this.initBadgeDivCallback);
	},

	preBadgeHook : function() {
		var loadingBadgeNode = document.createElement("div");
		loadingBadgeNode.id = "achiPortalFriendsLoadingBadgeNode";
		loadingBadgeNode.className = "achiPortalFriendsLoadingNode";
		loadingBadgeNode.innerHTML = "<br /><br /><img width=100px height=100px src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/loading.gif' />"; 
		accedo.achievement.achiPortalFriendsDetail.ajaxBadgeDivNode.appendChild(loadingBadgeNode);
	},

	postBadgeHook : function() {
		var loadingBadgeNode = document.getElementById("achiPortalFriendsLoadingBadgeNode");
		accedo.achievement.achiPortalFriendsDetail.ajaxBadgeDivNode.removeChild(loadingBadgeNode);
	},

	initBadgeDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");
		accedo.achievement.achiPortalFriendsDetail.ajaxBadgeDivNode.appendChild(
			accedo.achievement.achiPortalFriendsDetail.createBadgeDiv(serverDataObj));
	},

	/**
	 * create the badge div node
	 * @return {div node} badge div node
	 */
	createBadgeDiv : function(serverDataObj) {
		// create badge title sub-div node
		var badgeTitleDivNode = document.createElement("div");
		badgeTitleDivNode.id = "achiPortalFriendsAppTitle";

		var badgeWordNode = document.createElement("div");
		badgeWordNode.id = "badgeFriendsWordNode"; 
		badgeWordNode.innerHTML = "<font color=white>Badges</font>";
		badgeTitleDivNode.appendChild(badgeWordNode);

		// create badge list sub-div node
		var badgeListDivNode = document.createElement("div");
		badgeListDivNode.id = "achiPortalFriendsBadgeList";

		// create badge list left arrow, right arrow and badge container
		var badgeListLeftDivNode = document.createElement("div");
		badgeListLeftDivNode.id = "achiPortalFriendsAppListLeft";

		this.badgeListLeftArrowDivNode = document.createElement("div");
		this.badgeListLeftArrowDivNode.id = "badgeFriendsLeftArrow"; 
		this.badgeListLeftArrowDivNode.className = "achiFriendsPortalArrow";
		this.badgeListLeftArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/leftArrow.png' />"
		this.badgeListLeftArrowDivNode.style.visibility = "hidden";
		badgeListLeftDivNode.appendChild(this.badgeListLeftArrowDivNode);

		var badgeListRightDivNode = document.createElement("div");
		badgeListRightDivNode.id = "achiPortalFriendsAppListRight";

		this.badgeListRightArrowDivNode = document.createElement("div");
		this.badgeListRightArrowDivNode.id = "badgeFriendsRightArrow"; 
		this.badgeListRightArrowDivNode.className = "achiFriendsPortalArrow";
		this.badgeListRightArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/rightArrow.png' />"
		
		this.minLeft[1] = 900 - ((serverDataObj.badges.length * 150) + 30);
		this.maxLeft[1] = 0;
		if (this.minLeft[1] >= 0) {
			this.badgeListRightArrowDivNode.style.visibility = "hidden";
		}

		badgeListRightDivNode.appendChild(this.badgeListRightArrowDivNode);

		var badgeListCtnDivNode = document.createElement("div");
		badgeListCtnDivNode.id = "achiPortalFriendsAppListCtn";

		badgeListDivNode.appendChild(badgeListLeftDivNode);

		

		badgeListCtnDivNode.appendChild(this.createBadgeCell(serverDataObj)); 
		badgeListDivNode.appendChild(badgeListCtnDivNode);
		badgeListDivNode.appendChild(badgeListRightDivNode);

		// create badge div node
		var badgeDivNode = document.createElement("div");
		badgeDivNode.id = "achiPortalFriendsBadge";

		// append badge title and badge list sub-div nodes to badge div node
		badgeDivNode.appendChild(badgeTitleDivNode);
		badgeDivNode.appendChild(badgeListDivNode);
		 
		return badgeDivNode; 
	},

	createBadgeCell : function(serverDataObj) {

		this.badgeListInnerDivNode = document.createElement("div");
		this.badgeListInnerDivNode.id = "achiPortalFriendsAppListInner";
		this.badgeListInnerDivNode.style.left = "0px"; 
		this.badgeListInnerDivNode.style.width = 150*serverDataObj.badges.length + 30  + "px";

		this.divLength[1] = serverDataObj.badges.length; 
		var cellInterval = 0;
		for (var badgeCellNum = 0; badgeCellNum < this.divLength[1]; badgeCellNum++) {
			var badgeListCellDivNode = document.createElement("div");

			if (serverDataObj.badges[badgeCellNum].state == "none") {
				badgeListCellDivNode.className = "achiPortalFriendsAppListCellSmallGray";
			} else {
				badgeListCellDivNode.className = "achiPortalFriendsAppListCellSmall";
			}

			// badgeListCellDivNode.className = "achiPortalFriendsAppListCellSmall";
			

			cellInterval = cellInterval + 30;
			badgeListCellDivNode.style.left = cellInterval + "px";
			badgeListCellDivNode.id = "BadgePortalFriends" + badgeCellNum;

			badgeListCellDivNode.innerHTML = 
				"<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/badgeImages/" 
				+ serverDataObj.badges[badgeCellNum].badge_sn 
				+ ".png' />"
				+ "<hidden id='" + badgeListCellDivNode.id + "sn'"
				+ "value='"+ serverDataObj.badges[badgeCellNum].badge_sn + "'/>"
				+ "<hidden id='" + badgeListCellDivNode.id + "name'"
				+ "value='"+ serverDataObj.badges[badgeCellNum].badge_name + "'/>";

			if (serverDataObj.badges[badgeCellNum].state == "finished") {
				var cellStar = document.createElement("div");
				cellStar.id = "cellStar";
				cellStar.className = "cellStar";
				cellStar.innerHTML = "<img width=100% height=100% src='http://"
									+ accedo.achievement.config.serverIP + ":" 
									+ accedo.achievement.config.serverPort + "/" 
									+ accedo.achievement.config.pluginName + "/images/otherImages/cellStar.png' />";
				badgeListCellDivNode.appendChild(cellStar);
			}

			this.badgeListInnerDivNode.appendChild(badgeListCellDivNode);
		}

		return this.badgeListInnerDivNode; 
	},

	//********************************************************************************************

	initAwardDiv : function(username) {
		dwr.engine.setPreHook(this.preAwardHook); 
		dwr.engine.setPostHook(this.postAwardHook);
		CampService._path = "http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/dwr";
		CampService.getJsonCampsByUsernameForFriendShow(username,
			this.initAwardDivCallback);
	},

	preAwardHook : function() {
		var loadingAwardNode = document.createElement("div");
		loadingAwardNode.id = "achiPortalFriendsLoadingAwardNode";
		loadingAwardNode.className = "achiPortalFriendsLoadingNode";
		loadingAwardNode.innerHTML = "<br /><br /><img width=100px height=100px src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/loading.gif' />"; 
		accedo.achievement.achiPortalFriendsDetail.ajaxAwardDivNode.appendChild(loadingAwardNode);
	},

	postAwardHook : function() {
		var loadingAwardNode = document.getElementById("achiPortalFriendsLoadingAwardNode");
		accedo.achievement.achiPortalFriendsDetail.ajaxAwardDivNode.removeChild(loadingAwardNode);
	},

	initAwardDivCallback : function(data) {
		var serverDataObj = eval("(" + data + ")");
		accedo.achievement.achiPortalFriendsDetail.ajaxAwardDivNode.appendChild(
			accedo.achievement.achiPortalFriendsDetail.createAwardDiv(serverDataObj));
	},

	/**
	 * create the award div node
	 * @return {div node} award div node
	 */
	createAwardDiv : function(serverDataObj) {
		// create award title sub-div node
		var awardTitleDivNode = document.createElement("div");
		awardTitleDivNode.id = "achiPortalFriendsAppTitle";

		var awardWordNode = document.createElement("div");
		awardWordNode.id = "awardFriendsWordNode"; 
		awardWordNode.innerHTML = "<font color=white>Campaigns</font>";
		awardTitleDivNode.appendChild(awardWordNode);


		// create award list sub-div node
		var awardListDivNode = document.createElement("div");
		awardListDivNode.id = "achiPortalFriendsAwardList";

		// create award list left arrow, right arrow and award container
		var awardListLeftDivNode = document.createElement("div");
		awardListLeftDivNode.id = "achiPortalFriendsAppListLeft";

		this.awardListLeftArrowDivNode = document.createElement("div");
		this.awardListLeftArrowDivNode.id = "AppPortalFriendsLeftArrow"; 
		this.awardListLeftArrowDivNode.className = "achiFriendsPortalArrow";
		this.awardListLeftArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/leftArrow.png' />"
		this.awardListLeftArrowDivNode.style.visibility = "hidden"; 
		awardListLeftDivNode.appendChild(this.awardListLeftArrowDivNode);

		var awardListRightDivNode = document.createElement("div");
		awardListRightDivNode.id = "achiPortalFriendsAppListRight";

		this.awardListRightArrowDivNode = document.createElement("div");
		this.awardListRightArrowDivNode.id = "AppPortalFriendsRightArrow"; 
		this.awardListRightArrowDivNode.className = "achiFriendsPortalArrow";
		this.awardListRightArrowDivNode.innerHTML = "<img width=50% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/otherImages/rightArrow.png' />"
		
		this.minLeft[2] = 1080 - ((serverDataObj.camps.length * 150) + 30);
		this.maxLeft[2] = 0;
		if (this.minLeft[2] >= 0) {
			this.awardListRightArrowDivNode.style.visibility = "hidden";
		}
		awardListRightDivNode.appendChild(this.awardListRightArrowDivNode);

		var awardListCtnDivNode = document.createElement("div");
		awardListCtnDivNode.id = "achiPortalFriendsAppListCtn";

		
		

		awardListDivNode.appendChild(awardListLeftDivNode);
		awardListCtnDivNode.appendChild(this.createAwardCell(serverDataObj)); 
		awardListDivNode.appendChild(awardListCtnDivNode);
		awardListDivNode.appendChild(awardListRightDivNode);

		// create award div node
		var awardDivNode = document.createElement("div");
		awardDivNode.id = "achiPortalFriendsAward";

		// append award title and award list sub-div nodes to award div node
		awardDivNode.appendChild(awardTitleDivNode);
		awardDivNode.appendChild(awardListDivNode);
		 
		return awardDivNode; 
	},

	createAwardCell : function(serverDataObj) {

		this.awardListInnerDivNode = document.createElement("div");
		this.awardListInnerDivNode.id = "achiPortalAppListInner";
		this.awardListInnerDivNode.style.left = "0px"; 
		this.awardListInnerDivNode.style.width = 150*serverDataObj.camps.length + 30  + "px";

		this.divLength[2] = serverDataObj.camps.length;
		var cellInterval = 0;
		for (var awardCellNum = 0; awardCellNum < this.divLength[2]; awardCellNum++) {
			var awardListCellDivNode = document.createElement("div");

			if (serverDataObj.camps[awardCellNum].state == "none") {
				awardListCellDivNode.className = "achiPortalFriendsAppListCellSmallGray";
			} else {
				awardListCellDivNode.className = "achiPortalFriendsAppListCellSmall";
			}

			// awardListCellDivNode.className = "achiPortalFriendsAppListCellSmall";
			cellInterval = cellInterval + 30;
			awardListCellDivNode.style.left = cellInterval + "px";
			awardListCellDivNode.id = "AwardPortalFriends" + awardCellNum;
	
			awardListCellDivNode.innerHTML = "<img width=100% height=100% src='http://"
								+ accedo.achievement.config.serverIP + ":" 
								+ accedo.achievement.config.serverPort + "/" 
								+ accedo.achievement.config.pluginName + "/images/campImages/" 
				+ serverDataObj.camps[awardCellNum].camp_sn
				+ ".png' />"
				+ "<hidden id='" + awardListCellDivNode.id + "sn'"
				+ "value='"+ serverDataObj.camps[awardCellNum].camp_sn + "'/>"
				+ "<hidden id='" + awardListCellDivNode.id + "name'"
				+ "value='"+ serverDataObj.camps[awardCellNum].camp_name + "'/>"
				+ "<hidden id='" + awardListCellDivNode.id + "end'"
				+ "value='"+ serverDataObj.camps[awardCellNum].camp_end + "'/>";  

			if (serverDataObj.camps[awardCellNum].state == "finished") {
				var cellStar = document.createElement("div");
				cellStar.id = "cellStar";
				cellStar.className = "cellStar";
				cellStar.innerHTML = "<img width=100% height=100% src='http://"
									+ accedo.achievement.config.serverIP + ":" 
									+ accedo.achievement.config.serverPort + "/" 
									+ accedo.achievement.config.pluginName + "/images/otherImages/cellStar.png' />";
				awardListCellDivNode.appendChild(cellStar);
			}

			this.awardListInnerDivNode.appendChild(awardListCellDivNode);
		}

		return this.awardListInnerDivNode; 
	},


	moveCurrDiv : function(direction) {
		
		var divOldNode = document.getElementById(this.idPrefix + this.divCurrID[this.row]);
		if (direction == "right" && this.divCurrID[this.row] < this.divLength[this.row] - 1) {
			
			// console.log("right button pressed!");
			this.divCurrID[this.row]++; 
			// this.changeTitleName(this.idPrefix + this.divCurrID[this.row]); 
			if (this.moveCount[this.row] == 4) {
				var innerLeftValue = this.innerNode.offsetLeft - 150;
				this.innerNode.style.left = innerLeftValue + "px"; 

				if (innerLeftValue <= this.minLeft[this.row]) {
					this.rightArrowNode.style.visibility = "hidden"; 
				}
				if (innerLeftValue < this.maxLeft[this.row]) {
					this.leftArrowNode.style.visibility = "visible"; 
				}


			} else {
				this.moveCount[this.row]++; 
			}

		} else if (direction == "left" && this.divCurrID[this.row] > 0) {
			this.divCurrID[this.row]--; 
			// this.changeTitleName(this.idPrefix + this.divCurrID[this.row]); 
			if (this.moveCount[this.row] == 0) {
				var innerLeftValue = this.innerNode.offsetLeft + 150;
				this.innerNode.style.left = innerLeftValue + "px";

				if (innerLeftValue >= this.maxLeft[this.row]) {
					this.leftArrowNode.style.visibility = "hidden"; 
				}
					
				if (innerLeftValue > this.minLeft[this.row]) {
					this.rightArrowNode.style.visibility = "visible"; 
				}

			} else {
				this.moveCount[this.row]--; 
			}
		} else if (direction == "down") {
			if (this.row == 2) {
				this.row = 0;
			} else {
				this.row++; 
			}
			if (this.row == 0) {
				this.idPrefix = "AppPortalFriends";
				this.innerNode = this.appListInnerDivNode; 
				this.leftArrowNode = this.appListLeftArrowDivNode;
				this.rightArrowNode = this.appListRightArrowDivNode;
			} else if (this.row == 1) {
				this.idPrefix = "BadgePortalFriends";
				this.innerNode = this.badgeListInnerDivNode;
				this.leftArrowNode = this.badgeListLeftArrowDivNode;
				this.rightArrowNode = this.badgeListRightArrowDivNode; 
			} else if (this.row == 2) {
				this.idPrefix = "AwardPortalFriends";
				this.innerNode = this.awardListInnerDivNode; 
				this.leftArrowNode = this.awardListLeftArrowDivNode;
				this.rightArrowNode = this.awardListRightArrowDivNode;
			}

		} else if (direction == "up") {
			if (this.row == 0) {
				this.row = 2;
			} else {
				this.row--; 
			}
			if (this.row == 0) {
				this.idPrefix = "AppPortalFriends";
				this.innerNode = this.appListInnerDivNode; 
				this.leftArrowNode = this.appListLeftArrowDivNode;
				this.rightArrowNode = this.appListRightArrowDivNode;
			} else if (this.row == 1) {
				this.idPrefix = "BadgePortalFriends";
				this.innerNode = this.badgeListInnerDivNode; 
				this.leftArrowNode = this.badgeListLeftArrowDivNode;
				this.rightArrowNode = this.badgeListRightArrowDivNode; 
			} else if (this.row == 2) {
				this.idPrefix = "AwardPortalFriends";
				this.innerNode = this.awardListInnerDivNode;
				this.leftArrowNode = this.awardListLeftArrowDivNode;
				this.rightArrowNode = this.awardListRightArrowDivNode;
			}

		}
		var divNewNode = document.getElementById(this.idPrefix + this.divCurrID[this.row]);
		if (divOldNode.className == "achiPortalFriendsAppListCellBig") {
			divOldNode.className = "achiPortalFriendsAppListCellSmall";
		} else if (divOldNode.className == "achiPortalFriendsAppListCellBigGray") {
			divOldNode.className = "achiPortalFriendsAppListCellSmallGray";
		}

		if (divNewNode.className == "achiPortalFriendsAppListCellSmall") {
			divNewNode.className = "achiPortalFriendsAppListCellBig";
		} else if (divNewNode.className == "achiPortalFriendsAppListCellSmallGray") {
			divNewNode.className = "achiPortalFriendsAppListCellBigGray";
		}

		
	},

	removePage : function() {
		document.onkeydown = this.oldOnkeydownFunc;
		var mainCtnNode = document.getElementById("achiPortalFriendsMainCtn");
		accedo.achievement.achiPortalFriendsMain.portalFriMainNode.removeChild(
			mainCtnNode);
	},

	keysControl : function(e) {
		e = window.event || e;
		switch (e.keyCode) {
		// left button
		case 37:
			this.moveCurrDiv("left");
			break;
		// up button
		case 38:
			this.moveCurrDiv("up");
			break;
		// right button
		case 39:
			this.moveCurrDiv("right");
			break; 
		// down button
		case 40:
			this.moveCurrDiv("down");
			break;

		// enter button
		case 13:
			var idName = this.idPrefix + this.divCurrID[this.row] + "sn"; 
			var hiddenNode = document.getElementById(idName);
			var hiddenValue = hiddenNode.getAttribute("value");

			var idNameName = this.idPrefix + this.divCurrID[this.row] + "name"; 
			var hiddenNameNode = document.getElementById(idNameName);
			var hiddenNameValue = hiddenNameNode.getAttribute("value");

			if (this.idPrefix == "AppPortalFriends") {
				var idCellNum = this.idPrefix + this.divCurrID[this.row] + "cellnum"; 
				var hiddenCellNumNode = document.getElementById(idCellNum);
				var hiddenCellNumValue = hiddenCellNumNode.getAttribute("value");
				accedo.achievement.achiMultiShow.appendAchiPage(this.userName, hiddenCellNumValue);
			} else if (this.idPrefix == "BadgePortalFriends") {
				accedo.achievement.achiPortalBadgeShow.appendPage(hiddenNameValue, hiddenValue, this.userName); 
			} else if (this.idPrefix == "AwardPortalFriends") {
				var idCampEnd = this.idPrefix + this.divCurrID[this.row] + "end"; 
				var hiddenCampEndNode = document.getElementById(idCampEnd);
				var hiddenCampEndValue = hiddenCampEndNode.getAttribute("value");
				accedo.achievement.achiPortalCampShow.appendPage(hiddenNameValue, hiddenValue, hiddenCampEndValue, this.userName);
			}
			break;
		// esc button
		case 27:
			this.removePage();
			break;
		default:
			break;
		}
	}
};